<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" id="app" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form @submit.prevent="save()" accept-charset="UTF-8" class="form m-t" id="reportMonthlyForm" method="post">
            <input name="id" type="hidden" v-model="item.id"/>
            <input name="token" type="hidden" v-model="item.token"/>
            <input name="newFlag" type="hidden" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">标题：</label>
                <div class="col-md-12">
                  <input aria-describedby="bean-title-error" aria-invalid="true" aria-required="true" class="form-control" id="bean-title" maxlength="255" name="title" placeholder="请输入标题" required="" type="text" v-model="item.title">
                  <span class="help-block m-b-none" for="bean-title" id="bean-title-error"></span>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-md-12">
              <vue-area
                  areaId="areaId"
                  areaName="areaName"
                  :areaIdVal="item.areaId||staff.dto().areaId"
                  :areaNameVal="item.areaName||staff.dto().areaName"
                  :areaFixed="item.areaId||staff.dto().areaId"
                  :selectBy="item.areaId||staff.dto().areaId"
                  areaRequired="true,true,false,false,false"
              ></vue-area>
            </div>
            <div class="clearfix "></div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">行政区代码：</label>
                <div class="col-md-12">
                  <input aria-describedby="bean-areaCode-error" aria-invalid="true" aria-required="true" class="form-control" id="bean-areaCode" maxlength="25" name="areaCode" placeholder="请输入行政区代码" required="" type="text" v-model="item.areaCode">
                  <span class="help-block m-b-none" for="bean-areaCode" id="bean-areaCode-error"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">印发批次：</label>
                <div class="col-md-12">
                  <div class="input-daterange input-group">
                    <input autocomplete="off" id="bean-issuedBatchYear" name="issuedBatchYear" v-model="item.issuedBatchYear" class="laydate-icon form-control layer-date" type="text" placeholder="文号(年)" required="" aria-required="true" aria-describedby="bean-issuedBatchYear-error" aria-invalid="true">
                    <span class="input-group-addon">年</span>
                    <input autocomplete="off" id="bean-issuedBatchQuarter" name="issuedBatchQuarter" v-model="item.issuedBatchQuarter" class="laydate-icon form-control" min="1" type="number" placeholder="文号(期)" required="" aria-required="true" aria-describedby="bean-issuedBatchQuarter-error" aria-invalid="true">
                    <span class="input-group-addon">期</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">创建日期：</label>
                <div class="col-md-12">
                  <input aria-describedby="bean-reportingDate-error" aria-invalid="true" autocomplete="off" class="laydate-icon form-control layer-date" id="bean-reportingDate" name="reportingDate" placeholder="请输入填报日期" required="" type="text" v-model="item.reportingDate">
                  <span class="help-block m-b-none" for="bean-reportingDate" id="bean-reportingDate-error"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">附件：
                  <button class="btn btn-white" id="upload_btn_file" type="button">点击上传</button>
                </label>
                <div class="col-md-12">
                  <input id="bean_file" class="input-large form-control" name="file" type="text" v-model="item.file">
                </div>
              </div>
            </div>

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import '@/assets/css/upload.css'
import '@/assets/js/upload_single_file.js'
import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

import vueArea from '@/components/vue-area'
import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'

export default {
  components: {
    'vue-area': vueArea
  },
  data() {
    return {
      item: {},
      newFlag: 0,
      uuidToken: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#reportMonthlyForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.reportMonthly.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.reportMonthly.info)) {
        that.info();
      }
    });
    laydate.render({
      elem: '#bean-reportingDate',
      event: 'click',
      done: function (val) {
        that.item.reportingDate = val;
      }
    });
    laydate.render({
      elem: '#bean-issuedBatchYear',
      type: 'year',
      done: function (val) {
        that.item.issuedBatchYear = val;
      }
    });
    window.upload_single_file('upload_btn_file', 'bean_file', '*', 'file');
  },
  methods: {
    info() {
      let that = this;
      axios.get(site.reportMonthly.info + sessionStorage.getItem(site.reportMonthly.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#reportMonthlyForm').valid()) {
        axios.post(site.reportMonthly.save, $('#reportMonthlyForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    }
  }
}
</script>

